﻿@{
    Layout = "../Shared/_MobileLayout.cshtml";
}
@section title
{
    我的收藏
}
@section pagetitle
{
    我的收藏
}
<div class="userCenterHeader">
    <span class="iconWrapper">
        <img src="~/Themes/RongJi/Style/base/imgs/icon_cang.png">
    </span>
    <h3>我的收藏</h3>
    <br class="clearfix">
</div>
@model RiderShop.Mobile.Modle.MyAccount.MyFavoritesModel
@if (Model.FavoritesList == null)
{
    <div class="box">
        <div id="empty" style="text-align: center">
            <p>@Html.Raw("暂无收藏")</p>
            <div class="btn btn-default">
                <a href="/Home" class="empty_go_main">去逛逛</a>
            </div>
        </div>
    </div>
}
else
{
    <div class="box">
        <div id="myFavoritesList">
            @foreach (var product in Model.FavoritesList)
            {
                <div class="ItemTable ItemFavorite">
                    <div class="ItemLeft">
                        <a href="~/Product/ProductDetail?prd=@product.ProductId">
                            <img src="@product.ImageNameSize125">
                        </a>
                    </div>
                    <div class="ItemRight ItemRightWrod">
                        <p class="title"><a href="~/Product/ProductDetail?prd=@product.ProductId">@product.Title</a></p>
                        <p class="red">现价格：￥@product.UnitPrice</p>
                        <p class="red">关注价格：￥@product.MarketPrice</p>
                        @if (product.Active)
                        {
                            <p class="red">库存：@product.DisplayHaveInventory</p>
                        }
                        else
                        {
                            <p class="red">此商品已下架</p>
                        }
                        <p class="gray">关注日期：@product.InDateFormated</p>
                    </div>
                    <div class="Remove">
                        <a pid="=@product.ProductId" class="glyphicon glyphicon-trash" href="~/MyAccount/CancelFavority?productId=@product.ProductId"></a>
                    </div>
                </div>
            }
        </div>
        <div class="ItemTable" id="showMore" page="1">
            更多...
        </div>
    </div>

}
@section footer
{
    <script language="javascript" type="text/javascript">
        $(function() {
            //让底部toolbar选中
            var $homeImg = $("#homeImg");
            var $categoryImg = $("#categoryImg");
            var $myaccountImg = $("#myaccountImg");
            var $searchImg = $("#searchImg");
            $homeImg.attr("src", "/Themes/RongJi/Style/base/imgs/f10.png");
            $categoryImg.attr("src", "/Themes/RongJi/Style/base/imgs/f2.png");
            $myaccountImg.attr("src", "/Themes/RongJi/Style/base/imgs/f3_c.png");
            $searchImg.attr("src", "/Themes/RongJi/Style/base/imgs/f4.png");

            //当只有一页数据时'更多'不需要显示出来
            if(@Model.TotalPage == 1) {
                $("#showMore").hide();
            }

            //滚动到屏幕底部时,追加下一页数据
            /*---------------------加载更多--------------------*/
            var isloading = false;
            var counter = 1;
            var totalPage = @Model.TotalPage;
            if(totalPage > 1) {
                $(window).bind("scroll", function() {
                    if ($(document).scrollTop() + $(window).height() >= $(document).height()) {
                        var pageIndex = $('#showMore').attr('page');
                        $('#showMore').show().html('正在加载中...');
                        if(pageIndex >= totalPage) {
                            $("#showMore").show().html('加载完毕').delay(2300).slideUp(1600);
                            return;
                        }
                        if(isloading) {
                            return;
                        }
                        isloading = true;
                        $.ajax({
                            type: "GET",
                            url:  "MyFavoritesByAjaxRequest?pageIndex=" + pageIndex,
                            dataType: "JSON",
                            success: function(response){
                                isloading = false;

                                if(response.length){
                                    $('#showMore').attr('page',parseInt(pageIndex)+1);
                                }
                                else{
                                    $("#showMore").show().html('加载完毕');
                                }
                                $.each(response, function(key, value) {
                                    $("#myFavoritesList").append("<div class='ItemTable ItemFavorite' id='div" + counter + "' style='margin-top:100px;opacity:0.3'></div>");
                                    var html = '<div>' +
                                        '<div class="ItemLeft">' +
                                        '<a href="~/Product/ProductDetail?prd=' + value.ProductId + '"><img src="' + value.ImageNameSize125 + '"></a>' +
                                        '</div>' +
                                        '<div class="ItemRight ItemRightWrod">' +
                                        '<p class="title"><a href="~/Product/ProductDetail?prd=value.ProductId">' + value.Title + '</a></p>' +
                                        '<p class="red">关注价格：￥' + value.MarketPrice + '</p>' +
                                        '<p class="red">当前价格：￥' + value.UnitPrice + '</p>' +
                                        '<p class="red">'+ (value.Active?('库存：' + value.DisplayHaveInventory):'此商品已下架') + '</p>' +
                                        '<p class="gray">关注日期：' + value.InDateFormated + '</p>' +
                                        '</div>' +
                                        '<div class="Remove">' +
                                        '<a pid="value.ProductId" class="glyphicon glyphicon-trash" href="/MyAccount/CancelFavority?productId=' + value.ProductId + '"></a>' +
                                        '</div>' +
                                        '</div>';
                                    $("#div" + counter).append(html).animate({ opacity: '1', marginTop: 0 }, 2000);
                                    counter++;
                                });
                            }
                        });
                    }
                });
            }
        });
    </script>
}